import React from 'react';
import Img from './img1.jpg'

// 1. 创建高阶组件, 约定组件名以with开头, 高阶组件形参是一个要被传入的组件, 首字母需大写, 代表传入和渲染的时一个组件
// 2. 在高阶组件里定义一个类组件, 定义状态及事件处理函数等逻辑代码
// 3. 将类组件返回
function withMouse(WarpComponent) {
  class Mouse extends React.Component {
    // 复用的状态
    state = {
      x: 50,
      y: 50
    }
    // 复用的事件函数
    point = (e) => {
      this.setState({
        x: e.clientX,
        y: e.clientY
      })
    }
    componentDidMount() {
      window.addEventListener('mousemove', this.point)
    }
    componentWillUnmount() {
      window.removeEventListener('mousemove', this.point)
    }
    render() {
      // 将复用的数据传递给传入的组件
      return <WarpComponent point={ this.state }/>
    }
  }

  // 复用组件的别名, 方便调试
  function getDisplayName(WarpComponent) {
    return WarpComponent.displayName || WarpComponent.name || 'Component'
  }
  Mouse.displayName = `name --- ${getDisplayName(WarpComponent)}`
  return Mouse
}

// 4. 定义要传入给高阶组件的参数, 也是一个组件(创建增强组件)
// 5. 在该组件中使用props接收传入的数据并使用
function MousePoint(props) {
  return (
    <div>
      <p>{ props.point.x } --- { props.point.y }</p>
    </div>
  )
}

function ArtPoint(props) {
  return (
    <div>
      <img
        src={Img}
        alt=""
        style={{
        width: '100px',
        height: '100px',
        borderRadius: '50%',
        position: 'absolute',
        top: props.point.y - 50,
        left: props.point.x - 50,
        zIndex: -1
      }} />
    </div>
  )
}

// 6. 将组件传入 withMouse , 得到增强的组件
const Point = withMouse(MousePoint)
const Art = withMouse(ArtPoint)

function Handler() {
  return (
    <div>
      <Point />
      <Art />
    </div>
  )
}

export default Handler